import { Avatar, List } from 'antd';
import { UserOutlined, RobotOutlined } from '@ant-design/icons';
import { CSSProperties } from 'react';

interface Message {
    content: string;
    isUser: boolean;
}

export default function ChatMessage({ content, isUser }: Message) {
    // 消息容器样式
    const containerStyle: CSSProperties = {
        display: 'flex',
        flexDirection: isUser ? 'row-reverse' : 'row',
        gap: '12px',
        marginBottom: '16px',
        maxWidth: '85%',
        marginLeft: isUser ? 'auto' : '0'
    };

    // 消息气泡样式
    const bubbleStyle: CSSProperties = {
        background: isUser ? '#1890ff' : '#f0f0f0',
        color: isUser ? 'white' : 'rgba(0, 0, 0, 0.88)',
        borderRadius: isUser ? '8px 8px 0 8px' : '8px 8px 8px 0',
        padding: '12px 16px',
        maxWidth: '70%',
        wordBreak: 'break-word'
    };

    return (
        <div style={containerStyle}>
            <Avatar
                icon={isUser ? <UserOutlined /> : <RobotOutlined />}
                size={40}
                style={{
                    backgroundColor: isUser ? '#1890ff' : '#52c41a',
                    flexShrink: 0
                }}
            />
            <div style={bubbleStyle}>
                <div style={{ fontSize: '12px', marginBottom: '4px' }}>
                    {isUser ? '' : 'AI主持人'}
                </div>
                {content}
            </div>
        </div>
    );
}